<template>
	<div>
		<!-- 搜索页面 -->
		<van-search v-model="keyword" placeholder="请输入歌名" shape="round" />
		<!-- 搜索下容器 -->
		<div class="search_wrap" v-if="searchRes.length === 0">
			<!-- 标题 -->
			<p class="hot_title">热门搜索</p>
			<!-- 热搜关键词容器 -->
			<div class="hot_name_wrap">
				<!-- 每个搜索关键词 -->
				<span class="hot_item" v-for="item in hotKey" :key="item.first" @click="putKey(item.first)">{{item.first}}</span>
			</div>
		</div>

		<!-- 搜索结果 -->
		    <div class="search_wrap" v-else>
		      <!-- 标题 -->
		      <p class="hot_title">最佳匹配</p>
		      <van-cell
			    v-for="item in searchRes"
				:key="item.id"
		        center
		        :title='item.name'
				:label="item.ar[0].name"
		      >
		        <template #right-icon>
		          <van-icon name="play-circle-o" size="0.6rem"/>
		        </template>
		      </van-cell>
		    </div>
	</div>
</template>

<script>
	import { hotKeyAPI , searchKeyWordAPI } from '../../api/index.js'
	export default {
		data() {
			return {
				keyword: '',
				hotKey: [],
				searchRes: []
			};
		},
		
		created() {
			hotKeyAPI()
			.then((res) => {
				console.log(res.data.result.hots)
				this.hotKey = res.data.result.hots;
			})
		},
		
		
		methods: {
			putKey(val){
				this.keyword = val;
				this.getList().then((res) => {
					this.searchRes = res.data.result.songs;
					console.log(res)
				});
				
			},
			
			getList(){
				return searchKeyWordAPI({
					keywords: this.keyword,
					limit: 15 
				})
			}
		}
	};
</script>

<style>
	/* 搜索容器的样式 */
	.search_wrap {
		padding: 0.266667rem;
	}

	/*热门搜索文字标题样式 */
	.hot_title {
		font-size: 0.32rem;
		color: #666;
	}

	/* 热搜词_容器 */
	.hot_name_wrap {
		margin: 0.266667rem 0;
	}

	/* 热搜词_样式 */
	.hot_item {
		display: inline-block;
		height: 0.853333rem;
		margin-right: 0.213333rem;
		margin-bottom: 0.213333rem;
		padding: 0 0.373333rem;
		font-size: 0.373333rem;
		line-height: 0.853333rem;
		color: #333;
		border-color: #d3d4da;
		border-radius: 0.853333rem;
		border: 1px solid #d3d4da;
	}
</style>
